export default function updateNodeElement(newElement, virtualDOM, oldVirtualDOM = {}) {
    // 获取节点属性对象
    const newProps = virtualDOM.props || {};
    const oldProps = oldVirtualDOM.props || {};

    // 扩展更新节点的方法，处理文本节点
    if (virtualDOM.type === "text") {
        if (newProps.textContent !== oldProps.textContent) {
            if (virtualDOM.parent.type !== oldVirtualDOM.parent.type) {
                virtualDOM.parent.stateNode.appendChild(
                    document.createTextNode(newProps.textContent)
                )
            } else {
                virtualDOM.parent.stateNode.replaceChild(
                    document.createTextNode(newProps.textContent),
                    oldVirtualDOM.stateNode
                )
            }
        }
        return
    }

    // 遍历属性名
    Object.keys(newProps).forEach(propName => {
        const newPropsValue = newProps[propName]
        const oldPropsValue = oldProps[propName]
        // 判断现在的和之前的是否相等
        if (newPropsValue !== oldPropsValue) {
            // 判断属性是否是事件属性,看属性名是否是on开头
            if (propName.slice(0, 2) === 'on') {
                const eventName = propName.toLowerCase().slice(2)
                //为元素添加事件
                newElement.addEventListener(eventName, newPropsValue)
                // 元素旧的事件需要移除
                if (oldPropsValue) {
                    newElement.removeEventListener(eventName, oldPropsValue)
                }
                // 如果属性名称是 value 或者 checked 需要通过 [] 的形式添加
            } else if (propName === 'value' || propName === 'checked') {
                newElement[propName] = newPropsValue
            } else if (propName !== 'children') {
                if (propName === 'className') {
                    newElement.setAttribute('class', newPropsValue)
                } else {
                    newElement.setAttribute(propName, newPropsValue)
                }
            }
        }
    })

    // 判断属性被删除的情况
    Object.keys(oldProps).forEach(propName => {
        const newPropsValue = newProps[propName]
        const oldPropsValue = oldProps[propName]
        // 没有新属性值就是被删除了
        if (!newPropsValue) {
            // 如果是事件
            if (propName.slice(0, 2) === 'on') {
                const eventName = propName.toLowerCase().slice(2)
                newElement.removeEventListener(eventName, oldPropsValue)
            } else if (propName !== 'children') {
                newElement.removeAttribute(propName)
            }
        }
    })
}